<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识库管理 - 公文库</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    :root {
      --primary-color: #1976d2;
      --secondary-color: #f5f5f5;
      --text-color: #333;
      --light-text: #666;
      --border-color: #e0e0e0;
      --danger-color: #d32f2f;
      --success-color: #388e3c;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #f9f9f9;
      color: var(--text-color);
    }

    .container {
      display: flex;
      min-height: 100vh;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 240px;
      background-color: white;
      box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
      padding: 20px 0;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 20px;
    }

    .sidebar-header h2 {
      display: flex;
      align-items: center;
      font-size: 18px;
    }

    .sidebar-header h2 i {
      margin-right: 10px;
      color: var(--primary-color);
    }

    .sidebar-menu {
      list-style: none;
    }

    .sidebar-menu li {
      margin-bottom: 5px;
    }

    .sidebar-menu a {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      color: var(--text-color);
      text-decoration: none;
      transition: all 0.3s;
    }

    .sidebar-menu a:hover {
      background-color: var(--secondary-color);
    }

    .sidebar-menu a.active {
      background-color: rgba(25, 118, 210, 0.1);
      color: var(--primary-color);
      border-left: 3px solid var(--primary-color);
    }

    .sidebar-menu a i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      padding: 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .header h1 {
      font-size: 24px;
      display: flex;
      align-items: center;
    }

    .header h1 i {
      margin-right: 10px;
      color: var(--primary-color);
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }

    .btn i {
      margin-right: 5px;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: #1565c0;
    }

    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-color);
    }

    .btn-outline:hover {
      background-color: var(--secondary-color);
    }

    .btn-danger {
      background-color: var(--danger-color);
      color: white;
    }

    .btn-danger:hover {
      background-color: #b71c1c;
    }

    .btn-sm {
      padding: 5px 10px;
      font-size: 13px;
    }

    /* 知识库信息卡片 */
    .knowledge-info {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 20px;
    }

    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .info-title {
      font-size: 18px;
      font-weight: 600;
    }

    .info-body {
      display: flex;
      gap: 30px;
    }

    .info-icon {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-color: #e3f2fd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: var(--primary-color);
    }

    .info-details {
      flex: 1;
    }

    .info-desc {
      color: var(--light-text);
      margin-bottom: 15px;
      line-height: 1.5;
    }

    .info-meta {
      display: flex;
      gap: 20px;
    }

    .meta-item {
      display: flex;
      align-items: center;
    }

    .meta-item i {
      margin-right: 5px;
      color: var(--light-text);
    }

    /* 文件管理区域 */
    .file-manager {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }

    .file-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .file-title {
      font-size: 18px;
      font-weight: 600;
    }

    .file-actions {
      display: flex;
      gap: 10px;
    }

    .file-toolbar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    .search-bar {
      position: relative;
      width: 300px;
    }

    .search-bar input {
      width: 100%;
      padding: 8px 15px 8px 35px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
    }

    .search-bar i {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--light-text);
    }

    .file-filters {
      display: flex;
      gap: 10px;
    }

    .filter-btn {
      padding: 6px 12px;
      background-color: transparent;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }

    .filter-btn.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    /* 文件表格 */
    .file-table {
      width: 100%;
      border-collapse: collapse;
    }

    .file-table th {
      text-align: left;
      padding: 12px 15px;
      background-color: var(--secondary-color);
      font-weight: 500;
      color: var(--light-text);
    }

    .file-table td {
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-color);
    }

    .file-table tr:last-child td {
      border-bottom: none;
    }

    .file-table tr:hover td {
      background-color: rgba(0, 0, 0, 0.02);
    }

    .file-icon {
      width: 40px;
      text-align: center;
      color: var(--light-text);
    }

    .file-name {
      display: flex;
      align-items: center;
    }

    .file-name i {
      margin-right: 10px;
      color: var(--primary-color);
    }

    .file-actions-cell {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* 分页控件 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      align-items: center;
    }

    .page-btn {
      padding: 6px 12px;
      margin: 0 3px;
      border: 1px solid var(--border-color);
      background-color: white;
      border-radius: 4px;
      cursor: pointer;
    }

    .page-btn.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .page-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-ellipsis {
      margin: 0 5px;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        padding: 10px;
      }

      .sidebar-menu {
        display: flex;
        overflow-x: auto;
      }

      .sidebar-menu li {
        margin-bottom: 0;
        white-space: nowrap;
      }

      .sidebar-menu a {
        padding: 10px 15px;
      }
    }

    @media (max-width: 768px) {
      .info-body {
        flex-direction: column;
        gap: 15px;
      }

      .info-meta {
        flex-wrap: wrap;
        gap: 10px;
      }

      .file-toolbar {
        flex-direction: column;
        gap: 10px;
      }

      .search-bar {
        width: 100%;
      }

      .file-filters {
        overflow-x: auto;
        padding-bottom: 5px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 侧边导航 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <h2><i class="fas fa-landmark"></i> 公文库</h2>
    </div>
    <ul class="sidebar-menu">
      <li><a href="#" class="active"><i class="fas fa-home"></i> 知识库首页</a></li>
      <li><a href="#"><i class="fas fa-file-alt"></i> 全部文件</a></li>
      <li><a href="#"><i class="fas fa-folder"></i> 我的收藏</a></li>
      <li><a href="#"><i class="fas fa-history"></i> 最近查看</a></li>
      <li><a href="#"><i class="fas fa-trash-alt"></i> 回收站</a></li>
      <li><a href="#"><i class="fas fa-users"></i> 成员管理</a></li>
      <li><a href="#"><i class="fas fa-cog"></i> 知识库设置</a></li>
      <li><a href="#"><i class="fas fa-chart-bar"></i> 统计报表</a></li>
    </ul>
  </div>

  <!-- 主内容区 -->
  <div class="main-content">
    <!-- 头部区域 -->
    <div class="header">
      <h1><i class="fas fa-landmark"></i> 公文库管理</h1>
      <div class="header-actions">
        <button class="btn btn-outline"><i class="fas fa-sync-alt"></i> 刷新</button>
        <button class="btn btn-primary"><i class="fas fa-plus"></i> 上传文件</button>
      </div>
    </div>

    <!-- 知识库信息卡片 -->
    <div class="knowledge-info">
      <div class="info-header">
        <div class="info-title">知识库信息</div>
        <button class="btn btn-outline btn-sm"><i class="fas fa-edit"></i> 编辑信息</button>
      </div>
      <div class="info-body">
        <div class="info-icon">
          <i class="fas fa-landmark"></i>
        </div>
        <div class="info-details">
          <p class="info-desc">政府机关内部各类政府公文，包括通知、公告、报告、请示、批复等各类公文格式和内容。</p>
          <div class="info-meta">
            <div class="meta-item"><i class="fas fa-file-alt"></i> 文件数量: 1,245</div>
            <div class="meta-item"><i class="fas fa-users"></i> 访问权限: 公共</div>
            <div class="meta-item"><i class="fas fa-user"></i> 创建者: 管理员</div>
            <div class="meta-item"><i class="fas fa-calendar-alt"></i> 创建时间: 2023-05-12</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件管理区域 -->
    <div class="file-manager">
      <div class="file-header">
        <div class="file-title">文件管理</div>
        <div class="file-actions">
          <button class="btn btn-outline btn-sm"><i class="fas fa-folder-plus"></i> 新建文件夹</button>
          <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 批量下载</button>
          <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i> 批量删除</button>
        </div>
      </div>

      <div class="file-toolbar">
        <div class="search-bar">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="搜索文件...">
        </div>
        <div class="file-filters">
          <button class="filter-btn active">全部</button>
          <button class="filter-btn">文档</button>
          <button class="filter-btn">表格</button>
          <button class="filter-btn">演示文稿</button>
          <button class="filter-btn">图片</button>
          <button class="filter-btn">其他</button>
        </div>
      </div>

      <table class="file-table">
        <thead>
        <tr>
          <th width="50"><i class="far fa-square"></i></th>
          <th>文件名</th>
          <th width="150">大小</th>
          <th width="150">修改日期</th>
          <th width="150">创建者</th>
          <th width="120">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-folder"></i> 2023年政府工作报告</td>
          <td>-</td>
          <td>2023-06-15</td>
          <td>管理员</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-word"></i> 关于推进数字化政府建设的通知.docx</td>
          <td>2.4 MB</td>
          <td>2023-05-28</td>
          <td>张主任</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-excel"></i> 2023年第一季度财政预算执行情况.xlsx</td>
          <td>1.8 MB</td>
          <td>2023-04-20</td>
          <td>李会计</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-pdf"></i> 政府信息公开条例.pdf</td>
          <td>3.2 MB</td>
          <td>2023-03-10</td>
          <td>王科长</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-powerpoint"></i> 政务服务平台建设方案.pptx</td>
          <td>5.6 MB</td>
          <td>2023-02-18</td>
          <td>赵工程师</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-image"></i> 政府大楼外观.jpg</td>
          <td>1.2 MB</td>
          <td>2023-01-05</td>
          <td>钱秘书</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td class="file-name"><i class="fas fa-file-archive"></i> 历史公文归档.zip</td>
          <td>256 MB</td>
          <td>2022-12-30</td>
          <td>管理员</td>
          <td class="file-actions-cell">
            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-share-alt"></i></button>
            <button class="btn btn-outline btn-sm"><i class="fas fa-trash-alt"></i></button>
          </td>
        </tr>
        </tbody>
      </table>

      <div class="pagination">
        <button class="page-btn disabled"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span class="page-ellipsis">...</span>
        <button class="page-btn">8</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>
</div>

<script>
  // 这里可以添加交互逻辑
  document.addEventListener('DOMContentLoaded', function() {
    // 筛选按钮点击事件
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        filterBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 表格行点击事件
    const tableRows = document.querySelectorAll('.file-table tbody tr');
    tableRows.forEach(row => {
      row.addEventListener('click', function(e) {
        // 如果点击的是复选框或操作按钮，则不触发
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON' || e.target.parentElement.tagName === 'BUTTON') {
          return;
        }

        // 这里可以添加打开文件或文件夹的逻辑
        console.log('打开文件:', this.querySelector('.file-name').textContent.trim());
      });
    });
  });
</script>
</body>
</html>